<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">


  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>

  <button @click="btnClick()">修改</button>

</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      letters:['a','b','c','d','e']

    },
    methods:{
      btnClick(){
        //1 push()  是响应式的  可以一次添加多个元素
        // this.letters.push('aa');

        //2 通过索引值修改数组的元素 vue2不能响应  3可以
        // this.letters[0]='bb';

        //3 pop() shift() 是响应式的
        // this.letters.pop();

        //4 unshift() 在数组最前面添加元素  响应式
        // this.letters.unshift('aaaa');

        //5 splice()  插入元素 / 拆入元素/ 替换元素
        //第一个参数 表示 第几个元素开始操作
        //第二个参数 表示 删除 几个元素  不传表示删除后面所有的元素  0表示不删
        //后面的参数 是可变形参 表示插入的数据
        // this.letters.splice(1,2,'gg','gg')

        //6 reveres() 翻转函数  响应式
        this.letters.reverse();

      }



    }

  })
</script>

</body>
</html>